<!-- -->
<template>
  <div class="asidemenu">
    <el-menu
      router
      :default-active="$route.name"
      background-color="rgb(235, 235, 235)"
      text-color="rgb(50, 50, 50)"
      active-text-color="#973444"
      @open="handleOpen"
      @close="handleClose"
    >
      <template v-for="item in asideMenu">
        <el-submenu v-if="item.children" :index="item.name" :key="item.name">
          <template slot="title">
            <i :class="'el-icon-' + item.icon"></i>
            <span slot="title">{{ item.label }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="children in item.children"
              :index="children.name"
              :key="children.name"
            >
              <i :class="'el-icon-' + children.icon"></i>
              <span slot="title">{{ children.label }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-else :index="item.name" :key="item.name">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{ item.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "AsideMenu",
  data() {
    return {
      asideMenu: [],
      userId: ""
    };
  },
  created() {
    this.getAsideMenu();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getAsideMenu() {
      this.userId = sessionStorage.getItem("userId");
      this.token = sessionStorage.getItem("token");
      this.axios
        .post("/api/getMenu", {
          Authorization: this.token
        })
        .then(res => {
          // console.log(res.data);
          if (res.data.code === 200) {
            sessionStorage.setItem("isAdmin", true);
            this.$parent.isAdmin = true;

            for (let i of res.data.data.list) {
              if (!i.children[0]) {
                delete i.children;
              }
            }
            this.asideMenu = res.data.data.list;
          }
        })
        .catch(error => {
          console.log(error);
          this.$parent.isAdmin = false;
        });
      // this.axios.get('/api/menu').then((res)=>{
      //   console.log(res.data);
      //   for(let i of res.data.data.list){
      //     if(!i.children[0]){
      //       delete i.children
      //     }
      //   }
      //   this.asideMenu = res.data.data.list;
      // }).catch((error)=>{
      //   console.log(error);
      // })
    }
  }
};
</script>
<style scoped>
.asidemenu {
  width: 100%;
  height: 100%;
}
.el-menu {
  height: 100%;
}
</style>